import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet-async';
import { motion } from 'framer-motion';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { useSEOConfig, generateHreflangTags, generateStructuredData } from '@/lib/seo';

export default function AboutCulture() {
  const { t } = useTranslation();
  const seoConfig = useSEOConfig({
    title: `${t('header.corporateCulture')} - 豆豆Pay`,
    description: t('seo.pages.aboutCulture.description')
  });
  const hreflangTags = generateHreflangTags('/about/culture');
  const structuredData = generateStructuredData(seoConfig, 'organization');
  
  // 企业文化价值观数据
  const values = [
    {
      title: t('aboutPages.corporateCulture.customerFirst'),
      description: t('aboutPages.corporateCulture.customerFirstDesc'),
      icon: "fa-heart",
      color: "from-red-500 to-pink-500"
    },
    {
      title: t('aboutPages.corporateCulture.innovationDriven'),
      description: t('aboutPages.corporateCulture.innovationDrivenDesc'),
      icon: "fa-lightbulb",
      color: "from-yellow-500 to-amber-500"
    },
    {
      title: t('aboutPages.corporateCulture.integrityHonest'),
      description: t('aboutPages.corporateCulture.integrityHonestDesc'),
      icon: "fa-shield-alt",
      color: "from-blue-500 to-indigo-500"
    },
    {
      title: t('aboutPages.corporateCulture.winWin'),
      description: t('aboutPages.corporateCulture.winWinDesc'),
      icon: "fa-handshake",
      color: "from-green-500 to-teal-500"
    }
  ];
  
  // 团队文化数据
  const teamCulture = [
    {
      title: t('aboutPages.corporateCulture.openCommunication'),
      description: t('aboutPages.corporateCulture.openCommunicationDesc')
    },
    {
      title: t('aboutPages.corporateCulture.learningGrowth'),
      description: t('aboutPages.corporateCulture.learningGrowthDesc')
    },
    {
      title: t('aboutPages.corporateCulture.diversityInclusion'),
      description: t('aboutPages.corporateCulture.diversityInclusionDesc')
    },
    {
      title: t('aboutPages.corporateCulture.responsibility'),
      description: t('aboutPages.corporateCulture.responsibilityDesc')
    }
  ];
  
  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Helmet>
        {/* Basic Meta Tags */}
        <title>{seoConfig.title}</title>
        <meta name="description" content={seoConfig.description} />
        <meta name="keywords" content={seoConfig.keywords} />

        {/* Canonical URL */}
        <link rel="canonical" href={seoConfig.url} />

        {/* Open Graph / Facebook */}
        <meta property="og:title" content={seoConfig.title} />
        <meta property="og:description" content={seoConfig.description} />
        <meta property="og:image" content={seoConfig.image} />
        <meta property="og:url" content={seoConfig.url} />
        <meta property="og:locale" content={seoConfig.locale} />
        <meta property="og:site_name" content={seoConfig.siteName} />
        <meta property="og:type" content="website" />

        {/* Twitter */}
        <meta name="twitter:title" content={seoConfig.title} />
        <meta name="twitter:description" content={seoConfig.description} />
        <meta name="twitter:image" content={seoConfig.image} />
        <meta name="twitter:card" content="summary_large_image" />

        {/* Hreflang tags for multilingual SEO */}
        {hreflangTags.map((tag, index) => (
          <link key={index} rel={tag.rel} hrefLang={tag.hreflang} href={tag.href} />
        ))}

        {/* Structured Data */}
        <script type="application/ld+json">
          {JSON.stringify(structuredData)}
        </script>
      </Helmet>
      
      <Header />
      
      <main className="flex-grow">
        {/* 页面标题区域 */}
        <section className="py-16 md:py-24 bg-gradient-to-r from-purple-50 to-pink-50">
          <div className="container mx-auto px-4">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="max-w-3xl mx-auto text-center"
            >
              <h1 className="text-3xl md:text-5xl font-bold text-gray-900 mb-6">
                {t('header.corporateCulture')}
              </h1>
              <div className="w-20 h-1 bg-purple-500 mx-auto mb-8 rounded-full"></div>
              <p className="text-lg md:text-xl text-gray-700 leading-relaxed">
                {t('aboutPages.corporateCulture.subtitle')}
              </p> 
            </motion.div>
          </div>
        </section>
        
        {/* 使命愿景 */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8 }}
                viewport={{ once: true }}
              >
                <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-6">{t('aboutPages.corporateCulture.missionVision')}</h2>
                <div className="w-16 h-1 bg-purple-500 mb-8 rounded-full"></div>
                
                <div className="space-y-8">
                  <div>
                    <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
                      <span className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
                        <i className="fa-solid fa-compass"></i>
                      </span>
                      {t('aboutPages.corporateCulture.missionTitle')}
                    </h3>
                    <p className="text-gray-700 pl-13">
                      {t('aboutPages.corporateCulture.missionDesc')}
                    </p>
                  </div>
                  
                  <div>
                    <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
                      <span className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
                        <i className="fa-solid fa-eye"></i>
                      </span>
                      {t('aboutPages.corporateCulture.visionTitle')}
                    </h3>
                    <p className="text-gray-700 pl-13">
                      {t('aboutPages.corporateCulture.visionDesc')}
                    </p>
                  </div>
                  
                  <div>
                    <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
                      <span className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
                        <i className="fa-solid fa-bullseye"></i>
                      </span>
                      {t('aboutPages.corporateCulture.goalsTitle')}
                    </h3>
                    <p className="text-gray-700 pl-13">
                      {t('aboutPages.corporateCulture.goalsDesc')}
                    </p>
                  </div>
                </div>
              </motion.div>
              
              <motion.div
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8, delay: 0.3 }}
                viewport={{ once: true }}
                className="relative"
              >
                <div className="rounded-xl overflow-hidden shadow-2xl">
                  <img
                    src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=modern%20office%20team%2C%20collaborative%20workspace%2C%20diverse%20employees&sign=2f6ff2f771560429b9b08fd4890a9ee7"
                    alt={t('aboutPages.corporateCulture.teamImageAlt')}
                    className="w-full h-auto"
                  />
                </div>
                <div className="absolute -bottom-6 -right-6 w-40 h-40 bg-purple-100 rounded-full -z-10"></div>
                <div className="absolute -top-6 -left-6 w-24 h-24 bg-pink-100 rounded-full -z-10"></div>
              </motion.div>
            </div>
          </div>
        </section>
        
        {/* 核心价值观 */}
        <section className="py-20 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="text-center max-w-3xl mx-auto mb-16">
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">{t('aboutPages.corporateCulture.coreValues')}</h2>
              <div className="w-20 h-1 bg-purple-500 mx-auto mb-8 rounded-full"></div>
              <p className="text-gray-700">
                {t('aboutPages.corporateCulture.valuesSubtitle')}
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {values.map((value, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="group bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
                >
                  <div className={`h-48 bg-gradient-to-br ${value.color} flex items-center justify-center`}>
                    <i className={`fa-solid ${value.icon} text-6xl text-white`}></i>
                  </div>
                  <div className="p-6">
                    <h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-purple-600 transition-colors">
                      {value.title}
                    </h3>
                    <p className="text-gray-600">
                      {value.description}
                    </p>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
        
        {/* 团队文化 */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="text-center max-w-3xl mx-auto mb-16">
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">{t('aboutPages.corporateCulture.teamCulture')}</h2>
              <div className="w-20 h-1 bg-purple-500 mx-auto mb-8 rounded-full"></div>
              <p className="text-gray-700">
                {t('aboutPages.corporateCulture.teamSubtitle')}
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-10 max-w-4xl mx-auto">
              {teamCulture.map((item, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="bg-purple-50 p-8 rounded-xl hover:bg-purple-100 transition-colors"
                >
                  <h3 className="text-xl font-bold text-gray-900 mb-3">{item.title}</h3>
                  <p className="text-gray-700">{item.description}</p>
                </motion.div>
              ))}
            </div>
            
            {/* 团队活动图片展示 */}
            <div className="mt-20">
              <h3 className="text-2xl font-bold text-gray-900 mb-8 text-center">{t('aboutPages.corporateCulture.teamActivities')}</h3>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.5 }}
                  viewport={{ once: true }}
                  className="rounded-xl overflow-hidden h-40 group"
                >
                  <img 
                    src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=team%20building%20activity%2C%20outdoor%20picnic%2C%20employees%20having%20fun&sign=d58c673b8bda59bb7f942cb6117813e9" 
                    alt={t('aboutPages.corporateCulture.teamBuildingAlt')} 
                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                </motion.div>
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.5, delay: 0.1 }}
                  viewport={{ once: true }}
                  className="rounded-xl overflow-hidden h-40 group"
                >
                  <img 
                    src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=annual%20dinner%2C%20employees%20celebrating%2C%20awards%20ceremony&sign=e5f15d2b6d97ebfadff9a9ebae9c7e4c" 
                    alt={t('aboutPages.corporateCulture.annualDinnerAlt')} 
                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                </motion.div>
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.5, delay: 0.2 }}
                  viewport={{ once: true }}
                  className="rounded-xl overflow-hidden h-40 group"
                >
                  <img 
                    src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=sports%20competition%2C%20team%20sports%2C%20employees%20playing%20basketball&sign=a0f0ee8c552a4b6caefc0ea4db39b249" 
                    alt={t('aboutPages.corporateCulture.sportsAlt')} 
                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                </motion.div>
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.5, delay: 0.3 }}
                  viewport={{ once: true }}
                  className="rounded-xl overflow-hidden h-40 group"
                >
                  <img 
                    src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=charity%20event%2C%20volunteers%20helping%20children&sign=492342a77574c1ea60235f9b442ed58f" 
                    alt={t('aboutPages.corporateCulture.charityAlt')} 
                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                </motion.div>
              </div>
            </div>
          </div>
        </section>
      </main>
      
      <Footer />
    </div>
  );
}